<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/videoWeb/layui-v2.5.7/layui/css/layui.css">
  <link rel="stylesheet" href="/videoWeb/element/element.css">
  <script src="/videoWeb/js/Jquery.js" ></script>
  <script src="/videoWeb/layui-v2.5.7/layui/layui.js"></script>
  <script src="/videoWeb/js/vue.js"></script>
  <script src="/videoWeb/element/element.js"></script>
  <title>视频投稿</title>
</head>

<body>
<div id="app">
  <el-menu :default-active="activeIndex" class="el-menu-demo" id="head" mode="horizontal" @select="handleSelect">
    <el-menu-item index="1">
      <el-image style="width: 100px; height: 50px" :src="url" :fit="fit"></el-image>
    </el-menu-item>
    <el-menu-item index="1">
      <a href="/videoWeb/fronts/index.html">
        <i class="el-icon-s-home"></i>主页
      </a>
    </el-menu-item>

    <el-menu-item style="float: right;" v-if="code != 100">
      <a href="">注册</a>
      /
      <a href="login.html">登录</a>
    </el-menu-item>

    <el-submenu index="5" style="float: right;" v-if="code === 100">
      <template slot="title">
        <div class="demo-type" style="display:inline-block">
          <div>
            <el-avatar :src="headImg"></el-avatar>
          </div>
        </div>
      </template>
      <el-menu-item index="5-1" style="color:black;font-weight:700;text-align:center;">{{name}}</el-menu-item>
      <el-menu-item index="5-2">
        <a href="/videoWeb/fronts/myHead.html">
          <i class="el-icon-user"></i>
          个人中心
        </a>
      </el-menu-item>
      <el-menu-item index="5-3" @click="loginOut"><i class="el-icon-switch-button"></i>退出</el-menu-item>
    </el-submenu>

    <el-menu-item style="float: right;"><i class="el-icon-s-custom"></i></el-menu-item>

  </el-menu>

  <!-- 侧边栏 -->
  <el-row class="tac" style="width: 25%;float: left;">
    <el-col :span="12">
      <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">

        <el-menu-item index="1">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>

        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-s-promotion"></i>
            <span>创作中心</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1"><a href="/videoWeb/fronts/uploadVideo.html"><i class="el-icon-video-camera-solid"></i>视频投稿</a></el-menu-item>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-menu-item index="3">
          <i class="el-icon-menu"></i>
          <span slot="title">导航二</span>
        </el-menu-item>

        <el-menu-item index="4" disabled>
          <i class="el-icon-document"></i>
          <span slot="title">导航三</span>
        </el-menu-item>

        <el-menu-item index="5">
          <i class="el-icon-setting"></i>
          <span slot="title">导航四</span>
        </el-menu-item>

      </el-menu>
    </el-col>
  </el-row>

  <div id="app_div1">

    <div>
      <br>
      <span><i class="el-icon-s-order"></i>视频标题</span>
      <br>
      <br>
      <el-input v-model="videoTitle" placeholder="请输入视频名称"></el-input>
      <br>
      <br>
      <span><i class="el-icon-upload"></i>上传视频</span>
      <br>
      <br>
      <el-upload class="upload-demo" accept=".mp4" drag action="/videoWeb/upFile" multiple :on-success="video_success" :headers="uploadHeaders">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将视频拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </div>
    <div v-if="videoSrc != ''">
      <video :src="videoSrc" id="videoSrc"></video>
    </div>
    <br>
    <span><i class="el-icon-s-data"></i>视频类型</span>
    <br>
    <br>
    <template>
      <el-select v-model="value" placeholder="一级分类" @Change="selectTwo(value)">
        <el-option v-for="item in selectListOne" :key="item.id" :label="item.typeName" :value="item.id" >
        </el-option>
      </el-select>

      <el-select v-model="valueTwo" style="margin-left: 20px;" placeholder="二级分类" >
        <el-option v-for="item in selectListTwo" :key="item.id" :label="item.typeName" :value="item.id">
        </el-option>
      </el-select>
    </template>
    <br>
    <br>
    <span><i class="el-icon-upload"></i>上传首页</span>
    <br>
    <br>
    <div>
      <el-upload class="upload-demo" accept=".png" drag action="/videoWeb/upFile" multiple :on-success="img_success" :headers="uploadHeaders">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </div>
    <div v-if="imgSrc != ''">
      <img :src="imgSrc" id="imgSrc"></img>
    </div>
    <br>
    <span><i class="el-icon-s-order"></i>填写说明</span>
    <br>
    <br>
    <el-input type="textarea" :rows="2" placeholder="说明" v-model="textarea"></el-input>
    <br>
    <br>
    <el-button type="primary" @click="getUp">确认上传<i class="el-icon-upload el-icon--right"></i></el-button>
  </div>

</div>

</body>

<style>

    #app_div1{
        /* border: 1px solid red; */
        /* display: inline-block; */
        width: 70%;
        float: right;
    }

    #app_div1>div{
        width: 33.5%;
        margin:0px;
    }

    #videoSrc{
    	width: 100%;
        height: 100%;
    }

    #imgSrc{
    	width: 100%;
        height: 100%;
    }

</style>

<script>

    layui.use('layer',function(){
        var layer = layui.layer;
    })

    new Vue({
        el:'#app',
        data:{
            urls:['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                 ,'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                 ,'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                 ,'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'],
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            code:1,//登录状态
            name:"",//用户姓名
            headImg:"",//用户头像
            id:0,//用户id
            videoSrc:"",
            imgSrc:"",
            videoTitle:"",
            selectListOne:[],
            selectListTwo:[],
            value:'',
            valueTwo:'',
            textarea:'',
            uploadHeaders:{Authorization:localStorage.Authorization},
        },
        mounted:function(){
            this.login();
            this.selectOne();
        },
        methods:{
            isCollapse: true,
            login:function(){
                var that = this;
                $.ajax({
                    url:"/videoWeb/getUserMessageOfLogin",
                    headers:{
                      Authorization:localStorage.Authorization,
                    },
                    success:function(res){
                        if(res.code == 100){
                            that.code = res.code;
                            that.name = res.data.username;
                            that.headImg = res.data.headImg;
                            that.id = res.data.id;
                        }
                        if(res.code == 401){
                            location.href="../../../../login";
                        }
                    }
                })
            },
            loginOut:function(){
                $.ajax({
                    url:"/videoWeb/loginOut",
                    headers:{
                      Authorization:localStorage.Authorization,
                    },
                    success:function(res){
                        location.href="../../../../login";
                    }
                })
            },
            video_success(res) {
    			if(res.code == 100){
                    this.videoSrc = res.upFileMessage;
                    layer.msg(res.message,{icon:1});
    			}else if(res.code == 104){
    			    this.videoSrc = res.upFileMessage;
                    layer.msg(res.message,{icon:2});
    			}
    		},
    		img_success(res) {
    			if(res.code == 100){
                    this.imgSrc = res.upFileMessage;
                    layer.msg(res.message,{icon:1});
    			}else if(res.code == 104){
    			    this.imgSrc = res.upFileMessage;
                    layer.msg(res.message,{icon:2});
    			}
    		},
    		selectOne:function(){
    		    var that = this;
    		    $.ajax({
    		        url:"/videoWeb/select",
                    headers:{
                      Authorization:localStorage.Authorization,
                    },
    		        data:{
    		            parentId:0,
    		        },
    		        success:function(res){
    		            console.log(res);
    		            that.selectListOne = res;
    		        }
    		    })
    		},
    		selectTwo:function(parentId){
    		    var that = this;
    		    this.valueTwo = "",
    		    $.ajax({
    		        url:"/videoWeb/select",
                    headers:{
                      Authorization:localStorage.Authorization,
                    },
    		        data:{
    		            parentId:parentId,
    		        },
    		        success:function(res){
    		            console.log(res);
    		            that.selectListTwo = res;
    		        }
    		    })
    		},
    		getUp:function(){//增加个人信息
    		    $.ajax({
    		        url:"/videoWeb/addVideo",
                    headers:{
                      Authorization:localStorage.Authorization,
                    },
    		        data:{
    		            videoTitle:this.videoTitle,
                        videoSrc:this.videoSrc,
                        imgSrc:this.imgSrc,
                        videoType:this.valueTwo,
                        userId:this.id,
                        explain:this.textarea,
    		        },
    		        success:function(res){
    		            layer.msg("添加成功",{icon:1});
    		        }
    		    })
    		}
        },
    })
</script>

</html>
